import React from 'react';
import { Typography, Space, Button } from 'antd';
import { Welcome } from '@ant-design/x';
import { useTheme, themeBackgrounds } from '../../contexts/ThemeContext';

const { Paragraph } = Typography;

const HeroSection: React.FC = () => {
  const { themeType } = useTheme();
  const isDark = themeType === 'dark';

  return (
    <div style={{ 
      padding: '120px 24px 80px', 
      textAlign: 'center',
      background: isDark 
        ? 'linear-gradient(180deg, #1a1d22 0%, #111318 100%)' 
        : themeBackgrounds.light
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Welcome 
          style={{
            marginBottom: 48,
            background: 'transparent',
          }}
          icon="https://ext.same-assets.com/2674311767/2036037007.svg"
          title="Ant Design X"
          description="AI 体验新秩序"
        />
        <Paragraph style={{ 
          fontSize: 18, 
          marginBottom: 32, 
          opacity: 0.7,
          color: isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)'
        }}>
          轻松打造 AI 驱动的界面。
        </Paragraph>
        <Space size="middle">
          <Button type="primary" size="large">开始使用</Button>
          <Button 
            size="large" 
            ghost 
            style={{ 
              borderColor: isDark ? '#fff' : '#6F4CFF',
              color: isDark ? '#fff' : '#6F4CFF'
            }}
          >
            设计文档
          </Button>
        </Space>
      </div>
    </div>
  );
};

export default HeroSection; 